<template>
	<view v-if="showPage==true" class="page-body" :class="[app.setCStyle()]">
		<u-navbar back-text="返回" title="申请售后" :background="{background:'#f2f2f2'}"></u-navbar>
		<view class="c_goods_info">
			<view class=" t_itle u-m-b-30 u-font-34">退款商品</view>
			<view class="u-flex">
				<view>
					<image :src="goodsImage" style="width:214rpx;height:214rpx;border-radius: 20rpx;"></image>
				</view>
				<view class="u-m-l-20 u-m-r-20 c_2">
					<view class="goods_name u-font-32 u-line-1">{{orderGoods.goods_name}}</view>
					<view class="u-flex">
						<view class="u-font-32 c_price"><text>￥</text>{{orderGoods.sale_price}}</view>
						<view class="u-font-24 c_num u-m-l-32">x{{orderGoods.goods_number}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="c_return_info">
			<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
			<view class=" t_itle u-m-b-30 u-font-34">退款信息</view>
			<view class="u-flex c_100 ">
				<view class="w_125 u-font-28">退款类型</view>
				<view class="u-flex u-flex-1 u-row-between u-m-l-40" @click="show = true">
					<view class="u-font-28 c_x">{{choice}}</view>
					<view class="fuhao">
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="c_100">
				<view class="u-flex">
					<view class="w_125 u-font-28 ">退款金额</view>
					<view> <text class="r_red">*</text><text class="u-m-l-40 u-font-28 r_red">¥{{return_money}}</text>
					</view>
				</view>

				<view class="u-font-22 r_ra">不可修改，最多¥{{return_money}}，含发货邮费¥0.00</view>
			</view>

		</view>
		<view class="s_submit">
			<view>退款原因</view>
			<!--  -->
			<view class="return_desc">
				<view class="z_s_num u-flex u-row-right u-font-24" style="transform:translateY(55rpx);margin-right: 10rpx;color: #999999;">{{return_desc.length}}/200</view>
				<!-- <view class="z_s_num u-flex u-row-right" style="position:relative;top:55rpx;" >{{return_desc.length}}/200</view> -->
				<u-input type="textarea" border :height="200"  maxlength="200" v-model="return_desc" auto-height></u-input>
			
				</view>
		</view>
		<view class="u-p-20">
			<u-button size="default" class="subit_post " :ripple="true"   :loading="isLoading" @click="postApply"  ripple-bg-color="##5CB61A" shape="circle">提交</u-button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				showPage: false,
				goodsImage: '',
				selectClass: 'border-color base-color',
				upAction: this.config.upImageUrl,
				fileList: [],
				rec_id: 0,
				orderGoods: {},
				aftersale_number: 1,
				aftersaleType: 0,
				return_money: '0.00',
				return_desc: '',
				choice: '请选择',
				choice_id: 0,
				list: [{
					text: '退款',
					id: 3,
				}, {
					text: '退货退款',
					id: 1
				}],
				show: false
			}
		},
		onLoad(options) {
			this.app.isLogin(this); //强制登陆
			let rec_id = parseInt(options.rec_id);
			if (isNaN(rec_id) == true || rec_id < 1) {
				this.app.showModal('传值错误.', -1);
				return false;
			}
			this.rec_id = options.rec_id;
			this.getInfo();
		},
		onShow() {},
		methods: {
			click(index) {
				this.choice = this.list[index].text;
				this.choice_id = this.list[index].id;
				this.aftersaleType = this.choice_id;
				this.evalReturnMoney();

				// console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
			},
			getInfo() {
				this.$u.post('shop/api.after_sale/orderGoods', {
					rec_id: this.rec_id,
				}).then(res => {
					this.orderGoods = res.data;
					this.goodsImage = this.config.baseUrl + this.orderGoods.pic;
					this.showPage = true;
				}).catch(res => {
					this.app.showModal(res.msg, -1);
				})
			},
			setAftersaleType(type) { //选择售后类型
				this.aftersaleType = type;
				this.evalReturnMoney();
			},
			//数量
			numberChange(data) {
				this.aftersale_number = data.value;
				this.evalReturnMoney();
			},
			evalReturnMoney() { //计算退款金额
				if (this.aftersaleType == 2) {
					this.return_money = '0.00'; //换货，退款为0
					return false;
				}
				let sale_price = this.orderGoods.sale_price * this.aftersale_number;
				if (this.aftersale_number == this.orderGoods.return_num) { //售后数量达最大时
					this.return_money = sale_price - this.orderGoods.last_bonus_price - this.orderGoods.last_discount;
					return false;
				}
				let bonus_price = this.aftersale_number * this.orderGoods.one_bonus_price;
				let discount_price = this.aftersale_number * this.orderGoods.one_discount;
				this.return_money = sale_price - bonus_price - discount_price;
			},
			uploaded(res, index, lists) {
				var res = JSON.parse(res.data);
				this.fileList.push(res.file);
			},
			removeImg(index, lists) {
				let file = this.fileList[index];
				this.fileList.splice(index, 1);
				this.$u.post(this.config.removeImageUrl, {
					file: file
				}).then(res => {})
			},
			postApply() {
				if (this.isLoading == true) {
					return false;
				}
				if (this.aftersaleType < 1) {
					return this.$u.toast('请选择售后类型');
				}
				if (this.return_desc == '') {
					return this.$u.toast('请填写售后理由');
				}
				this.isLoading = true;
				let data = {};
				data.rec_id = this.rec_id;
				data.type = this.aftersaleType;
				data.goods_number = this.aftersale_number;
				data.return_desc = this.return_desc;
				data.fileList = this.fileList.join(',');
				this.$u.post('shop/api.after_sale/add', data).then(res => {
					this.isLoading = false;
					this.app.showModal(res.msg, 'index', -1);
				}).catch(res => {
					this.isLoading = false;
				})
			}
		}
	}
</script>

<style lang="scss">
	.c_goods_info {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0rpx 20rpx;
		padding: 32rpx 20rpx;

		.t_itle {
			font-weight: 400;
			color: #1A1A1A;
		}

		.goods_name {
			color: #333333;
			line-height: 40rpx;
			height: 60rpx;
		}

		.c_2 {
			width: 436rpx;
			margin-top: -60rpx;
		}

		.c_price {
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
		}

		.c_num {
			font-weight: 400;
			color: #C3C3C3;
			line-height: 36rpx;
		}
	}

	.c_return_info {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 20rpx;
		padding: 32rpx 20rpx 40rpx 20rpx;

		.c_100 {
			height: 100rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;


		}

		.r_red {
			color: #E61717;
		}

		.w_125 {
			width: 125rpx;
		}

		.c_x {
			color: #999999;
			font-weight: 300;
		}

		.r_ra {

			font-weight: 300;
			color: #999999;
			line-height: 60rpx;
		}
	}

	.s_submit {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 20rpx;
		padding: 32rpx 20rpx 30rpx 20rpx;
	}

	.subit_post {
		background-color: #5CB61A;
		font-weight: 400;
		color: #FFFFFF;
	}
	.return_desc{
		// margin-top: 5rpx;
		::v-deep .uni-textarea-wrapper {
			height: 100% !important; 
		}
	}
</style>
